import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Carousel from '../pages/Carousel';
import Tabbar from './Tabbar';
import Search from '../pages/Home/Search';
import Searchlist from '../pages/Searchlist';
import Article from '../pages/Article';
import Perfume from '../pages/Perfume';
import Comment from '../pages/Perfume/Comment';
import Ranklist from '../pages/Sort/Ranklist';
import Typec from '../pages/Sort/Typec';
import Collect from '../pages/Perfume/Collect';
import {useInstall} from './Context';
import Login from '../pages/login';
import Modify from '../pages/Modify';
import Speak from '../pages/Speak';
import Register from '../pages/register';

const Stack = createNativeStackNavigator();

const Stackbar = () => {
    const {isInstall} = useInstall();

    return (
        <NavigationContainer>
            <Stack.Navigator>
                {
                    isInstall ? 
                    <Stack.Screen 
                        name='Tabbar'
                        component={Tabbar}
                        options={{headerShown: false}}
                    /> :
                    <Stack.Screen 
                        name='Carousel'
                        component={Carousel}
                        options={{headerShown: false}}
                    />
                }
                <Stack.Screen 
                    name='Search'
                    component={Search}
                    options={{headerShown: false}}
                />
                <Stack.Screen 
                    name='Searchlist'
                    component={Searchlist}
                    options={{headerShown: false}}
                />
                <Stack.Screen 
                    name='Article'
                    component={Article}
                    options={{headerShown: false}}
                />
                <Stack.Screen 
                    name='Perfume'
                    component={Perfume}
                    options={{headerShown: false}}
                />
                <Stack.Screen 
                    name='Comment'
                    component={Comment}
                    options={{headerShown: false}}
                />
                <Stack.Screen 
                    name='Ranklist'
                    component={Ranklist}
                    options={{
                        headerShown: true,
                        headerTitleAlign: 'center',
                        headerStyle: {
                            height: h*0.1,
                            backgroundColor: 'white',
                        }
                    }}
                    
                />
                <Stack.Screen 
                    name='Typec'
                    component={Typec}
                    options={{
                        headerShown: true,
                        headerTitleAlign: 'center',
                        headerStyle: {
                            height: h*0.1,
                            backgroundColor: 'white',
                        }
                    }}
                    
                />
                <Stack.Screen 
                    name='Collect'
                    component={Collect}
                    options={{
                        headerShown: true,
                        headerTitleAlign: 'center',
                        headerStyle: {
                            height: h*0.1,
                            backgroundColor: 'white',
                        }
                    }}
                    
                />
                <Stack.Screen
                    options={{
                    headerShown: false,
                    }}
                    name='Modify' 
                    component={Modify}
                
                />
                <Stack.Screen
                    options={{
                    headerShown: false,
                    }}
                    name='Login' 
                    component={Login}
                
                />
                <Stack.Screen
                    options={{
                    headerShown: false,
                    }}
                    name='Speak' 
                    component={Speak}
                
                />
                <Stack.Screen
                    options={{
                    headerShown: false,
                    }}
                    name='Register' 
                    component={Register}
                
                />

             </Stack.Navigator>
        </NavigationContainer>
        
    )
}

export default Stackbar
